<template>
  <div class='gallery-wrap' @click.self="handleGalleryClose">
      <div class="gallery-content">
        <swiper :options="swiperOptions">
            <swiper-slide v-for="(item,index) in images" :key="index">
                 <img 
                 :src="item" 
                 alt=""
                 class="gallery-img"
                 >
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper> 
      </div>
  </div>
</template>
<script>
export default {
    name:"CommonGallery",
    props:{
      images:{
          type:Array,
          default () {
              return []
          }
      }
    },
    data () {
        return {
            swiperOptions:{
                pagination:".swiper-pagination",
                paginationType:"fraction",
                observeParents:true,
                observer:true,
                effect:"fade"
            }
        }
    },
    methods:{
        handleGalleryClose (){
            this.$emit("close")
        }
    }
}
</script>
<style lang='scss' scoped>
    .gallery-wrap{
        position:absolute;
        z-index:9;
        left:0;
        top:0;
        right:0;
        bottom:0;
        display:flex;
        flex-direction:column;
        justify-content: center;
        width:100%;
        height:100%;
        background-color:#000;
        color:#fff;
    }
    .gallery-content{
        width:100%;
        height:0;
        padding-bottom:100%;
    }
    .gallery-img{
        // width:100%
    }
    .swiper-container{
       overflow:visible
    }
    .swiper-pagination{
        bottom:-1rem;
    }
</style>